<template>
	<view class="coupon-manage-page">
		<scroll-view scroll-y="true" :style="'height:'+height+'px'" scroll-with-animation  @scrolltolower="LoadingMore">
			<view class="all-coupon">
				<view class="coupon-details" v-for="(item,index) in couponList" :key='index'>
					<view class="coupon-details-left">
						<view class="">
							<text>￥</text>{{item.deduction_amount}}
						</view>
						<view class="">
							每个付费项目限制使用1张
						</view>
					</view>
					<view class="coupon-details-right">
						<view class="coupon-title">
							{{item.activity_title | couponName_val}}
						</view>
						<view class="flash-sale">
							<view class="">限时优惠</view>
							<view class="" @click="useCoupoc(item)">去使用</view>
						</view>
						<view class="expire-time">
							到期时间：{{item.end_date}}
						</view>
					</view>
				</view>
			</view>
			<view class="coupon-explain">
				<view class="coupon-explain-title">优惠券说明：</view>
				<view class="common-coupon">1.每个优惠券都是独立的，分享一次只能领取一次。</view>
				<view class="common-coupon">2.请谨慎分享优惠券，如果家长使用优惠券，可以直接减免。可能会影响你的业绩提成。</view>
				<view class="common-coupon">3.每个项目每一个付费项目每1次只能使用1张优惠券。</view>
				<view class="common-coupon">4.活动项目优惠券，只限当前活动使用。</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		filters: {
			couponName_val (value) {
			  if (!value) return ''
			  if (value.length > 30) {
				return value.slice(0,30) + '...'
			  }
			  return value
			}
		},
		data(){
			return{
				page:1,
				pagesize:8,
				lastPage:'',
				couponList:[],
				height:0,
				customer_info: null,
				store_id:""
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
			this.getCustomer()
		},
		methods:{			
			getCustomer(){
				const data = {
					token:this.token,
					store_id:this.store_id
				}
				this.$api.getCustomerInfo(data).then(res => {
					console.log(res,'角色')
					if(res.status){
						this.customer_info = res.data
						this.getList()//获取可用的优惠券
					}
				}).catch(err => {
					console.log(err)
				})
			},
			useCoupoc(item){
				if(item.useTime){
					uni.navigateTo({
						url:'../../home/organization/activeDetail-3?page=coupon&coupon=' + JSON.stringify(item)
					})
				}else{
					uni.showToast({
						title:'优惠券已过期！',
						icon:'none',
						duration:2000
					})
				}
				
			},
			compareTime(actTime){
				let time = new Date()
				let allTime = time.getTime()
				let data = new Date(actTime.end_date)
				let actSec = data.getTime()
				if(allTime > actSec){
					actTime.useTime = false
					console.log('11111111111')
				}else{
					actTime.useTime = true
				}
			},
			// 获取优惠券列表
			getList(){
				
				let data = {
					token:this.$store.getters.getToken,
					customer_id:this.customer_info.userinfo.customer_id,
					page:this.page,
					pagesize:this.pagesize
				}
				this.$api.get_activity_coupon_customer(data).then(res => {
					console.log(res)
					if(res.status){
						this.couponList = res.list.data
						this.couponList.forEach(item => {
							this.compareTime(item)
						})
						console.log('优惠券列表',this.couponList)
						this.lastPage = res.list.last_page
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
				
				// this.uesCoupon = []
				// let data = {
				// 	token:this.$store.getters.getToken,
				// 	page:this.page,
				// 	pagesize:this.pagesize
				// }
				// this.$api.get_coupon_list(data).then( res => {
				// 	console.log(res)
				// 	if(res.status){
				// 		this.couponList = res.list.data
				// 		this.couponList.forEach(item => {
				// 			this.compareTime(item)
				// 		})
				// 		console.log('优惠券列表',this.couponList)
				// 		this.lastPage = res.list.last_page
				// 	}
				// }).catch( err => {
				// 	console.log(err)
				// })
			},
			// 加载下一页
			LoadingMore(){
				this.page ++
				console.log(this.page)
				if(this.page <= this.lastPage){
					this.getList()
				}else{
					uni.showToast({
						title:'到底啦！',
						icon:'none',
						duration:2000
					})
				}
			}
		}
	}
</script>

<style>
	page{
		background: #F3F3F4;
	}
	.coupon-manage-page{
		width: 100%;
		height: 100%;
	}
	.all-coupon{
		width: 100%;
		padding: 30upx 20upx;
		box-sizing: border-box;
	}
	.coupon-details{
		width: 100%;
		height: 230upx;
		background: #FFFFFF;
		border-radius: 10upx;
		display: flex;
		margin-bottom: 20upx;
	}
	.coupon-details-left{
		width: 30%;
		height: 100%;
		background: url(https://tool.tuanhaoke.cn/static/image/member/active_background_coupon.png) no-repeat;
		background-size: 100% 100%;
		color: #FFFFFF;
		padding: 50upx 0;
		box-sizing: border-box;
		text-align: center;
	}
	.coupon-details-right{
		width: 70%;
		padding: 20upx;
		box-sizing: border-box;
	}
	.coupon-details-left>view:first-child{
		font-size: 48upx;
	}
	.coupon-details-left>view>text{
		font-size: 32upx;
	}
	.coupon-details-left>view:last-child{
		font-size: 22upx;
		opacity: 0.8;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.coupon-title{
		height: 64upx;
		color: #333333;
		font-size: 28upx;
	}
	.flash-sale{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 26upx;
	}
	.flash-sale>view:first-child{
		color: #666666;
		font-size: 24upx;
		line-height: 60upx;
	}
	.flash-sale>view:last-child{
		width: 160upx;
		height: 60upx;
		line-height: 60upx;
		color: #FFFFFF;
		text-align: center;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 4upx;
		box-shadow: 0 6upx 10upx 0 rgba(166, 13, 0, 0.23);
		font-size: 24upx;
	}
	.expire-time{
		width: 100%;
		padding: 6upx 0;
		box-sizing: border-box;
		color: #999999;
		font-size: 24upx;
		margin-top: 6upx;
		border-top: 1upx dashed #D8D8D8;
	}
	.coupon-explain{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		
	}
	.coupon-explain-title{
		color: #333333;
		font-size: 30upx;
		font-weight: 900;
	}
	.common-coupon:first-child{
		margin-top: 30upx;
	}
	.common-coupon{
		color: #666666;
		font-size: 28upx;
		margin-top: 20upx;
	}
</style>
